<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header">登录页面</div>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="form-wrapper" status-icon>
        <el-form-item prop="userName">
          <el-input placeholder="用户名" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" show-password v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
          <el-button type="primary" @click="loginSubmit(loginForm)" class="btn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '../util/request';
import store from '../store/index'
import cookies from 'js-cookie'
import {encrypt, decrypt} from "../util/jsencrypt";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        rememberMe: false
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    loginSubmit(loginForm) {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 勾选记住我 在Cookie中设置记住用户名 密码
          if (loginForm.rememberMe) {
            cookies.set('username', loginForm.username, {expires: 30})
            cookies.set('password', encrypt(loginForm.password), {expires: 30})
            cookies.set('rememberMe', loginForm.rememberMe, {expires: 30})
          } else {
            // 否则清除
            cookies.remove('username')
            cookies.remove('password')
            cookies.remove('rememberMe')
          }

/*          let ret = ""
          for (let it in loginForm) {
            ret +=
                encodeURIComponent(it) + "=" + encodeURIComponent(loginForm[it]) + "&"
          }*/

          request.http.post('/login', loginForm).then(res => {
            if (res.code == 200) {
              store.commit('SET_TOKEN', res.token)
              store.commit('SET_MENU_LIST', res.menuList)
              store.commit('SET_USER_INFO', res.currentUser)
              this.$showMessage('success', '登录成功')
              this.$router.push('/home')
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getCookies() {
      const username = cookies.get("username")
      const password = cookies.get("password")
      const rememberMe = cookies.get("rememberMe")
      this.loginForm.username = username === undefined ? this.loginForm.username : username;
      this.loginForm.password = password === undefined ? this.loginForm.password : decrypt(password);
      this.loginForm.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe);
    }
  },
  mounted() {
    this.getCookies();
  }
}


</script>

<style scoped>
html {
  height: 100%;
}

body {
  height: 100%;
}

.container {
  height: 980px;
  width: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0px 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.el-input {
  display: block;
  width: 100%;
  /*  margin-bottom: 10px;*/
  border: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;

}

.btn {
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  width: 100%;
  margin-top: 30px;
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
}
</style>